import React, {Fragment } from 'react';
import 'antd/dist/antd.css'
import {Button, Input ,List} from 'antd'

const CommitItemUi = (props)=>{
    let {inputValue,list,changeInput,delItem,addItem} = props
    return(
        <Fragment>
                <div style={{width:'300px',margin:'20px 10px',display:'flex'}}>
                    <Input type='text' value={inputValue} onChange={changeInput} />
                    <Button type='denger' style={{marginLeft:'10px'}} onClick={addItem}>添加</Button>
                </div>
                <div style={{width:'300px',margin:'20px 10px',display:'flex'}}>
                    <List bordered dataSource={list} renderItem={
                        (item,index)=>(
                            <List.Item key={item + index}>
                                <List.Item.Meta avatar={item} />
                                <Button type="primary" danger onClick={()=>{delItem(index)}}>删除</Button>
                            </List.Item>
                        )} />
                </div>
        </Fragment>
    )
}


export default CommitItemUi
